<template>
  <section class="goods-footNav">
    <div class="foot-nav-content" :style="outModuleCss">
      <div :style="moduleBgCss" class="module-bg"></div>
      <div class="footNav-body">
        <section class="foot-btn-group">
          <div class="nav-item" v-for="(item, index) in tabList" :key="index">
            <div class="nav-icon">
              <img :src="item.icon" alt="" />
            </div>
            <div class="nav-text" :style="{ color: item.fontColor }">
              {{ item.text }}
            </div>
            <div class="item-hover">
              <div
                class="edit-box"
                @click.stop="handleToControl('goodsFootNavItemControl', item)"
              >
                <i class="iconfont icon-mokuai-bianji"></i>
              </div>
            </div>
          </div>
        </section>
        <section class="action-group">
          <div
            class="group-box"
            :class="styleType == 2 ? 'style-two' : ''"
            v-if="styleType == 1 || styleType == 2"
          >
            <div
              class="cart-btn"
              :style="{
                color: cartBtn.color,
                backgroundColor: cartBtn.bgColor,
              }"
            >
              {{ cartBtn.text }}
            </div>
            <div
              class="buy-btn"
              :style="{ color: buyBtn.color, backgroundColor: buyBtn.bgColor }"
            >
              {{ buyBtn.text }}
            </div>
          </div>
          <div class="group-box" v-if="styleType == 3">
            <div class="group-btns">
              <div
                class="btn-cart"
                :style="{
                  color: cartBtn.color,
                  backgroundColor: cartBtn.bgColor,
                }"
              >
                {{ cartBtn.text }}
              </div>
              <div
                class="btn-buy"
                :style="{
                  color: buyBtn.color,
                  backgroundColor: buyBtn.bgColor,
                }"
              >
                {{ buyBtn.text }}
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </section>
</template>

<script>
import { mixinsModuleCss } from "@/components/DiyNew/diy/mixins/index.js";

export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [mixinsModuleCss],
  components: {},
  data() {
    return {};
  },
  mounted() {},
  watch: {},
  computed: {
    tabList() {
      return this.propsData.params.tabList;
    },
    styleType() {
      return this.propsData.params.styleType;
    },
    buyBtn() {
      return this.propsData.params.buyBtn;
    },
    cartBtn() {
      return this.propsData.params.cartBtn;
    },
  },
  methods: {
    // 点击编辑当前状态
    handleToControl(name, item) {
      let data = item;
      data.controlComName = name;
      this.$emit("chooseMoudle", data);
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-footNav {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: -1px;
  z-index: 111;
  height: 50px;
  .foot-nav-content {
    width: 100%;
    height: 100%;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #f0f1f3;
  }
  .footNav-body {
    width: 100%;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    .foot-btn-group {
      flex: 1;
      display: flex;
      align-items: center;
      .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 12px;
        position: relative;
        .nav-icon {
          width: 16px;
          height: 16px;
          img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .nav-text {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #262626;
          margin-top: 3px;
          transform: scale(0.75);
        }

        .item-hover {
          width: 100%;
          height: 100%;
          border: 1px solid #1890fc;
          position: absolute;
          left: 0;
          top: 0;
          display: none;
          .edit-box {
            width: 20px;
            height: 20px;
            background: #1890fc;
            border-radius: 0px 0px 0px 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            position: absolute;
            right: 0;
            top: 0;
            .iconfont {
              font-size: 18px;
              color: #ffffff;
            }
          }
        }
      }
      .nav-item:hover > .item-hover {
        display: block;
      }
    }
    .action-group {
      flex: 1;
      display: flex;
      align-items: center;
      .group-box {
        display: flex;
        align-items: center;
        margin-right: 11px;
        .cart-btn {
          width: 100px;
          height: 38px;
          background-color: #f22407;
          border-radius: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 600;
          color: #ffffff;
        }
        .buy-btn {
          width: 100px;
          height: 38px;
          background-color: #faa60f 0%;
          border-radius: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 600;
          color: #ffffff;
          margin-left: 6px;
        }
        .group-btns {
          width: 206px;
          height: 38px;
          border-radius: 60px;
          overflow: hidden;
          display: flex;
          align-items: center;
          .btn-cart,
          .btn-buy {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 600;
            color: #ffffff;
          }
          .btn-cart {
            border-radius: 60px 0px 0px 60px;
            background-color: #f22407;
          }
          .btn-buy {
            border-radius: 0px 60px 60px 0px;
            background-color: #faa60f;
          }
        }
      }
      .style-two {
        .cart-btn,
        .buy-btn {
          border-radius: 0px;
        }
      }
    }
  }
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
